<template>
	<div class="person">
		<h3>求和为 {{ sum }}</h3>
		<h3>求和2为 {{ sum2 }}</h3>
		<button @click="addSum()">sum+1</button>
		<button @click="addSum2()">sum+1</button>
        <h2>汽车信息：一辆{{ car.brand }}车，它的颜色是：{{ car.option.color }}色, 引擎是: {{ car.option.engine }}</h2>
		<h2>汽车信息：一辆{{ car2.brand }}车，它的颜色是：{{ car2.option.color }}色, 引擎是: {{ car2.option.engine }}</h2>
        <button @click="changeCarPrice">修改汽车价格</button>
        <button @click="changeColor">变换汽车颜色</button>
		<button @click="changeEngine">变换汽车引擎</button>
		<button @click="changeCarPrice2">修改汽车价2格</button>
        <button @click="changeColor2">变换汽车颜色2</button>
		<button @click="changeEngine2">变换汽车引擎2</button>
        <br>
    </div>
</template>

<script setup lang="ts" name="App">
	import { ref, readonly, reactive, shallowReadonly } from 'vue';

	let sum = ref(0)
	// 使用readonly来保护生成的对象不被修改(无法保证源对象不被修改)
	let sum2 = readonly(sum) // 这里需要传的是ref对象，而不是具体值

	function addSum() {
		sum.value += 1
	}

	// 无法修改只读属性
	function addSum2() {
		sum2.value += 1
	}

	let car = reactive({
		'brand':'奔驰',
		'option':{
			'color': '红',
			'engine': 'V8'
		}
	})

	// shallowReadonly 只能保护第一层的内容不被修改，深层次不可以
	let car2 = shallowReadonly(car)

	function changeCarPrice() {
		car.brand = '奥迪'
	}

	function changeColor() {
		car.option.color = '黑'
	}

	function changeEngine() {
		car.option.engine = 'V4'
	}

	function changeCarPrice2() {
		car2.brand = '奥迪'
	}

	function changeColor2() {
		car2.option.color = '红'
	}

	function changeEngine2() {
		car2.option.engine = 'V6'
	}

</script>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>